<template>
    <div class="app-container">
        <el-row class="wrapper store">
            <el-col :span="24" class="warp-main">
                <div class="el-bar">
                    <p>
                        <i class="iconfont icon-users"></i>应用商店</p>
                    <!--应用商店-->
                    <el-form :inline="true" style="position:relative;margin-top:10px;">
                        <el-form-item>
                            <el-select v-model="selectedAppType" placeholder="请选择">
                                <el-option v-for="item in appTypeData" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="queryKey" placeholder="请输入搜索关键字"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="storeAppQuery" type="primary" icon="el-icon-search">搜索</el-button>
                        </el-form-item>
                    </el-form>
                    <!--数据列表-->
                    <el-table v-loading="loadingShopDataTable" ref="storeAppTable" :data="storeData" highlight-current-row height="430" style="width: 100%;">
                        <el-table-column width="50" type="expand">
                            <template slot-scope="scope">
                                <!--扩展的数据列表.start-->
                                <ImageTagTable :scope="scope" :deleteBtnDisabled="true"></ImageTagTable>
                                <!--扩展的数据列表.end-->
                            </template>
                        </el-table-column>
                        <el-table-column width="360" prop="name" label="名称" sortable></el-table-column>
                        <!-- <el-table-column width="350" prop="imageUrl" label="地址" sortable></el-table-column> -->
                        <el-table-column prop="type" label="类型" sortable></el-table-column>
                        <el-table-column width="120" prop="pull_count" label="部署次数" sortable></el-table-column>
                        <el-table-column width="120" prop="source" label="操作">
                            <template slot-scope="scope">
                                <el-button class="iconfont icon-bushu" type="text" @click="deployAppByImage(scope.$index, scope.row)" size="small">应用部署</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import ImageTagTable from '@/components/appCenter/appstoreAdmin/ImageTagTable';
import { appManagement } from '@/utils/appManagement'; // 应用管理工具类
export default {
    components: { ImageTagTable },
    data() {
        return {
            queryKey: '',
            storeData: [],
            appTypeData: [{
                value: '',
                label: '---全部应用类型---'
            }],
            selectedAppType: '',
            counter: 0,
            // 商店查询遮罩
            loadingShopDataTable: false,
        };
    },
    created: function() {
        this.appTypeQuery();
        this.storeAppQuery();//初始化
    },
    methods: {
        //商店应用查询
        storeAppQuery() {
            this.counter++;
            let url = this.projectConfig.URL_API_APP_STORE_APP_GROUND + '?queryKey=' + this.queryKey + '&appType=' + this.selectedAppType;
            // 开启遮罩
            this.loadingShopDataTable = true;
            this.httpClient.httpClientget(url).then((response) => {
                // 遮罩结束
                this.loadingShopDataTable = false;
                this.storeData = response.data;
            }).catch(error => {
                // 遮罩结束
                this.loadingShopDataTable = false;
            });
        },
        //应用类型查询
        appTypeQuery() {
            let url = this.projectConfig.URL_API_APP_STORE_APP_TYPE;
            this.httpClient.httpClientget(url).then((response) => {
                // 返回处理
                let data = response.data;
                if (data.length > 0) {
                    data.forEach((value) => {
                        let item = {
                            value: value.id,
                            label: value.name
                        };
                        this.appTypeData.push(item);
                    });
                }
            });
        },
        // 根据选择的镜像,部署应用
        deployAppByImage: function(index,row) {
            let imageName = row.name;
            if (imageName != '' && typeof imageName != 'undefined' && imageName != null) {
                // 设置镜像到缓存
                appManagement.setImageNameOnDeploy(row.name);
                // 跳转到部署应用页面
                this.$router.push({
                    path: '/apply/management/app_create/image_repertory'
                });
            }
        }
    }
};
</script>
<style>
.store .el-table tr {
    text-align: center;
}

.store .el-time {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.store .el-bottom {
    padding-bottom: 50px;
    margin-top: 10px;
}

.store .el-bar .nbd {
    border-bottom: none;
}

.store .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #ccc;
}

.store el-icon-search {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.store .search-input {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.store .search .el-input {
    border: 1px solid #eaeaea;
}

.store .el-date-editor--datetimerange {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.store .el-table .cell {
    padding: 0;
}

.store .el-button--danger {
    position: absolute;
    top: 51px;
    left: 489px;
}

.store .demonstration {
    display: block;
    width: 64px;
    height: 64px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.store .demonstration img {
    width: 60px;
    height: 60px;
}

.store .ul01 {
    position: absolute;
    top: 69px;
    left: 62px;
}

.store .el-table__expanded-cell {
    padding: 0;
}

.store .extend .el-table {
    padding-left: 20px;
}

.store .extend {
    border: none;
}
</style>